<template>
	<view class="page-view map-view tabbar">
		<view class="page-content">
			<view class="newtab">
				<view v-for="(item,index) in list" :key="item.type" @click="onClick(item.type)">
					<image :src="activeclass!=item.type?item.img:item.active" mode="widthFix"></image>
				</view>
			</view>
			<scroll-view class="map" scroll-x scroll-y ref="mapContent" id="scrollView" :scroll-left="scrollLeft">
				<view class="map-content">
					<net-image src="images/map/map.png" width="2600rpx" height="1783rpx" class="map-bg" @load="onBackgroundImageLoaded"></net-image>
					<view class="map-navigators" v-if="isReady">
						<navigator class="map-navigator" :id="'id'+(index+1)" v-for="(item,index) in points" :style="{left: item.rect.left, top: item.rect.top}" :class="activeclass==1||(activeclass==2 && item.code != 'H') ? '' : 'none'" @click="onClickNavigator(item)">
							<image v-if="item.label.src" :src="item.label.src" mode="widthFix" :style="{left: item.label.left, top: item.label.top, width: item.label.width, height: item.label.height}"></image>
							<image :src="item.icon.src" mode="widthFix" :style="{left: item.icon.left, top: item.icon.top, width: item.icon.width, height: item.icon.height}"></image>
							<view class="map-navigator-hot" :style="{left: item.hot.left, top: item.hot.top}">
								<image src="/static/map/icons/2_1.png" mode="widthFix" ></image>
								<text>{{ hotList[item.code] }}</text>
							</view>
							
						</navigator>
						
						<image :src="item.src" mode="widthFix" :class="activeclass==1?item.classShow:item.classHidden" v-for="item in otherPoints"></image>
					</view>
				</view>
			</scroll-view>
			<view class="popup" v-show="showPopup" @touchstart="$stopPropagation">
				<view class="popup-content center" @click="onClickPopup" >
					<image :src="exchargeTimeSrc" class="popup-image"></image>
					<image src="/static/map/btn_close.png" class="popup-close"/>
				</view>
				
			</view>
			<view class="ad" v-show="showAd" @touchstart="$stopPropagation">
				<view class="ad-content center">
					<image :src="gifSrc" class="ad-image"></image>
					<image src="/static/map/btn_close.png" class="ad-close" @click="stopAd"/>
				</view>
			</view>
			<view class="confirm" v-show="showConfirm" @touchstart="$stopPropagation">
				<view class="confirm-content center">
					<image src="/static/map/hk_1.png" class="confirm-image"></image>
					<image src="/static/map/hk_3.png" class="confirm-ok" @click="onConfirmOK"/>
					<image src="/static/map/hk_2.png" class="confirm-close" @click="onConfirmClose"/>
				</view>
			</view>
		</view>
		<custom-tabbar :selected-index="0"></custom-tabbar>
	</view>
</template>

<script>
	import {
		getHot,
		getExhib
	} from '@/api/mapApi.js'
	import {reportEvent} from '@/services/miniApi.js'
	import preventTouch from '@/mixins/preventTouch.js'
	import {
		COMMON_SHARE,
		THIRD_MINI_APP,
		SETTINGS
	} from '@/utils/const.js'
	import CustomTabbar from '@/components/customTabbar.vue'
	import NetImage from '@/components/netImage.vue'
	import {RES_PREFIX, POSITIONS} from '@/utils/const.js'
	
	export default {
		mixins: [preventTouch],
		components: {
			CustomTabbar,
			NetImage
		},
		data() {
			return {
				scrollLeft: 300,
				
				isReady: false,		//当前地图图片是否准备就绪
				timerId: null,
				adTimerId: null,
				activeclass: 1,
				hotList: {},
				navigateMap: {},
				exchargeTimeSrc: SETTINGS.EXCHARGE_TIME_URL,
				showPopup: false,
				
				gifSrc: SETTINGS.AD_URL,
				showAd: false,
				
				showConfirm: false,
				
				otherPoints: [{
						src: "../../static/map/icons/3_5.png",
						classShow: "cesuo cesuo-1",
						classHidden: "cesuo cesuo-1 none",
					},
					{
						src: "../../static/map/icons/3_5.png",
						classShow: "cesuo cesuo-2",
						classHidden: "cesuo cesuo-2 none",
					},
					{
						src: "../../static/map/icons/3_5.png",
						classShow: "cesuo cesuo-3",
						classHidden: "cesuo cesuo-3 none",
					},
					{
						src: "../../static/map/icons/3_3.png",
						classShow: "eat eat-1",
						classHidden: "eat eat-1 none",
					},
					{
						src: "../../static/map/icons/3_3.png",
						classShow: "eat eat-2 none",
						classHidden: "eat eat-2 none",
					},
					{
						src: "../../static/map/icons/3_3.png",
						classShow: "eat eat-3 none",
						classHidden: "eat eat-3 none",
					},
					{
						src: "../../static/map/icons/3_4.png",
						classShow: "eat eat-4 none",
						classHidden: "eat eat-4 none",
					},
					{
						src: "../../static/map/icons/3_3.png",
						classShow: "eat eat-5 none",
						classHidden: "eat eat-5 none",
					},
					{
						src: "../../static/map/icons/3_4.png",
						classShow: "eat eat-6 none",
						classHidden: "eat eat-6 none",
					},
					{
						src: "../../static/map/icons/3_4.png",
						classShow: "eat eat-7 none",
						classHidden: "eat eat-7 none",
					}
				],
				points: [].concat(POSITIONS),
				list: [
					{
						type: 1,
						active: "../../static/tab1.png", //原始显示的图标
						img: "../../static/tab1_unselect.png", //点击之后要显示的图标       
					},
					{
						type: 2,
						active: "../../static/tab2.png",
						img: "../../static/tab2_unselect.png",
					},
					{
						type: 3,
						active: "../../static/tab3.png",
						img: "../../static/tab3_unselect.png",
					},
					{
						type: 4,
						active: "../../static/tab4.png",
						img: "../../static/tab4_unselect.png",
					}
				],
			};
		},
		computed: {
			mapSrc(){
				return `${RES_PREFIX}images/map/map.png`
			}
		},
		methods: {
			onClickPopup(){
				console.log('onClickPopup')
				this.showPopup = false
			},
			onConfirmOK(){
				this.showConfirm = false
				wx.navigateToMiniProgram({
					appId: THIRD_MINI_APP.appid,
					path: THIRD_MINI_APP.path,
					success() {
						console.log("success")
					}
				})
				reportEvent('buy')
			},
			onConfirmClose(){
				this.showConfirm = false
			},
			onClickNavigator(item){
				console.log('onClickNavigator', item)
				if(!!item.event){
					reportEvent(item.event)
				}else{
					reportEvent('balor')
				}
				
				// :url='item.code != "H" && item.code != "I"?  navigateMap[item.code]:null' 
				
				//中心兑换处
				if(item.code == 'H'){
					this.showPopup = true
					return
				}
				
				if(!this.navigateMap[item.code]){
					return 
				}
				
				wx.navigateTo({
					url: this.navigateMap[item.code]
				})
			},
			onClick(type){
				if(type == 3){
					console.log("haikan", SETTINGS.HAIKAN_URL)
					uni.navigateTo({
						url: `/pages/detail/detail?img=${SETTINGS.HAIKAN_URL}`
					})
					reportEvent('play')
				}else if(type == 4){
					this.showConfirm = true
				}else if(type == 1){
					this.activeclass = 1
					reportEvent('total')
				}else if(type == 2){
					this.activeclass = 2
					reportEvent('schedule')
				}
			},
			onBackgroundImageLoaded(){
				console.log('onBackgroundImageLoaded')
				this.isReady = true
			},
			gethot() {
				getHot().then((data) => {
					var dic = {};
					for (let item of data){
						dic[item.code]=item.duration;
					}
					this.hotList = dic;
				}).catch((err) => {
					console.log(err+"fsfsfsf")
				})
			},
			getExhib() {
				getExhib().then((data)=>{
					var dic = {};
					for (let item of data) {
						dic[item.code] = `/pages/detail/detail?img=${RES_PREFIX}${item.imurl}`;
					}
					this.navigateMap = dic;

				}).catch((err) => {
					console.log(err)
				})
			},
			startHeartbeat() {
				if (this.timerId != null) return

				this.timerId = setInterval(() => {
					this.gethot()
				}, 60000)
			},
			stopHeartbeat() {
				if (this.timerId == null) return
				clearInterval(this.timerId)
				this.timerId = null
			},
			startAd(){
				if(this.adTimerId !== null){
					this.stopAdTimer()
				}
				
				this.showAd = true
				if(SETTINGS.AD_TIMES > 0){
					this.adTimerId = setTimeout(()=>{
						this.stopAd()
					}, SETTINGS.AD_TIMES)
				}
			},
			stopAd(){
				if(this.adTimerId !== null){
					clearTimeout(this.adTimerId)
					this.adTimerId = null
				}
				this.showAd = false
			}
		},
		onShow() {
			uni.hideTabBar()
			this.gethot()
			this.getExhib()
			this.startHeartbeat()
			reportEvent('tabbar_map')
		},
		onHide() {
			this.stopAd()
		},
		onLoad(){
			this.startAd()
		},
		onShareAppMessage() {
			return COMMON_SHARE
		}
	}
</script>

<style lang="scss">
	.map-view {
		background-color: #ffffff;
		.newtab {
			width: 750rpx;
			height: 100rpx;
			position: fixed;
			top: 0%;
			// background: linear-gradient(rgba(12, 39, 66, 0.3), rgba(70, 90, 110, 0.3));
			background-image: url(/static/map/bg.png);
			background-size: 100% 100%;
			z-index: 99;
			display: flex;
			justify-content: space-around;
			// color: grey;
			line-height: 100rpx;
			font-weight: 800;
		}
		
		.center {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate3d(-50%, -50%, 0);
		}
		
		.newtab image {
			width: 187.5rpx;
		}
		.popup {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.8);
			
			.popup-content {
				width: 582rpx;
				height: 500rpx;
				
				.popup-image {
					width: 100%;
					height: 100%;
				}
				.popup-close {
					position: absolute;
					left: 241rpx;
					top: 450rpx;
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
		
		.ad {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.8);
			
			.ad-content {
				width: 508rpx;
				height: 980rpx;
				top: 60%;
				transform: translate3d(-50%, -60%, 0);
				
				.ad-image {
					width: 508rpx;
					height: 980rpx;
				}
				.ad-close {
					position: absolute;
					left: 204rpx;
					top: 990rpx;
					width: 100rpx;
					height: 100rpx;
				}
			}
			
		}
		
		.confirm {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.8);
			
			.confirm-content {
				width: 667rpx;
				height: 790rpx;
				top: 56%;
				transform: translate3d(-50%, -56%, 0);
				
				.confirm-image {
					width: 667rpx;
					height: 790rpx;
				}
				.confirm-ok {
					position: absolute;
					right: 45rpx;
					top: 655rpx;
					width: 250rpx;
					height: 86rpx;
				}
				.confirm-close {
					position: absolute;
					left: 45rpx;
					top: 655rpx;
					width: 250rpx;
					height: 86rpx;
				}
			}
		}
		
		.map {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 100%;
			overflow: scroll;
			
			.map-content {
				position: absolute;
				left: 0;
				top: 0;
				width: 2600rpx;
				height: 1783rpx;
				background: #0f2741;
				.map-bg, .map-navigators {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					
				}
				
				.map-navigators {
					.map-navigator {
						position: absolute;
						display: inline-block;
						width: 0;
						height: 0;
						&.none {
							display: none;
						}
						> image {
							position: absolute;
						}
						
						.map-navigator-hot {
							position: absolute;
							width: 80rpx;
							
							image {
								position: absolute;
								left: 0;
								top: 0;
								width: 80rpx;
								height: 120rpx;
							}
							text {
								position: absolute;
								top: 34rpx;
								left: 0;
								width: 80rpx;
								height: 30rpx;
								
								
								font-size: 30rpx;
								font-weight: 800;
								text-align: center;
								color: rgb(232, 19, 37);
								text-align: center;
								vertical-align: middle;
							}
						}
						.map-icon {
							position: absolute;
						}
					}
					.cesuo {
						position: absolute;
						width: 66rpx;
						height: 75rpx;
						
						&.none {
							display: none;
						}
							
						&.cesuo-1 {left: 696rpx;top: 980rpx;}
						&.cesuo-2 {left: 1170rpx;top: 1115rpx;}
						&.cesuo-3 {left: 1380rpx;top: 510rpx;}
					}
					.eat {
						position: absolute;
						width: 89rpx;
						height: 95rpx;
						
						&.none {
							display: none;
						}
						
						&.eat-1 {left: 1528rpx;top: 829rpx;width: 61rpx;height: 65rpx;}
						&.eat-2 {left: 1032rpx;top: 350rpx;}
						&.eat-3 {left: 1333rpx;top: 683rpx;}
						&.eat-4 {left: 1261rpx;top: 713rpx;}
						&.eat-5 {left: 1286rpx;top: 878rpx;}
						&.eat-6 {left: 1150rpx;top: 948rpx;}
						&.eat-7 {left: 2140rpx;top: 488rpx;}
					}
				}
			}
		}
		
		@media screen and (max-height: 736px){
			.ad-content {
				transform-origin: center;
				transform: scale3d(0.8,0.8,1);
			}
		}
	}
</style>
